<div class="content-section introduction">
    <div class="feature-intro">
        <h1>TreeTable - Responsive</h1>
        <p>TreeTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-treeTable [value]="files">
            <ng-template pTemplate="caption">
                Responsive
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th>Name</th>
                    <th class="priority-2">Size</th>
                    <th class="priority-3">Type</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                <tr>
                    <td>
                        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        {{rowData.name}}
                        <span class="visibility-sm">
                            / {{rowData.size}} - {{rowData.type}}
                        </span>
                    </td>
                    <td class="priority-2">{{rowData.size}}</td>
                    <td class="priority-3">{{rowData.type}}</td>
                </tr>            
            </ng-template>
        </p-treeTable>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/treetable" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-treetableresponsive-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-treeTable [value]="files"&gt;
    &lt;ng-template pTemplate="caption"&gt;
        Responsive
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th class="priority-2"&gt;Size&lt;/th&gt;
            &lt;th class="priority-3"&gt;Type&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData"&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;p-treeTableToggler [rowNode]="rowNode"&gt;&lt;/p-treeTableToggler&gt;
                &#123;&#123;rowData.name&#125;&#125;
                &lt;span class="visibility-sm"&gt;
                    / &#123;&#123;rowData.size&#125;&#125; - &#123;&#123;rowData.type&#125;&#125;
                &lt;/span&gt;
            &lt;/td&gt;
            &lt;td class="priority-2"&gt;&#123;&#123;rowData.size&#125;&#125;&lt;/td&gt;
            &lt;td class="priority-3"&gt;&#123;&#123;rowData.type&#125;&#125;&lt;/td&gt;
        &lt;/tr&gt;            
    &lt;/ng-template&gt;
&lt;/p-treeTable&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
@Component(&#123;
    templateUrl: './treetableresponsivedemo.html',
    styles: [`
        :host ::ng-deep .priority-2, 
        :host ::ng-deep .priority-3,
        :host ::ng-deep .visibility-sm &#123;
            display: none;
        &#125;

        @media screen and (max-width: 39.938em) &#123;
            :host ::ng-deep .visibility-sm &#123;
                display: inline;
            &#125;
        &#125;

        @media screen and (min-width: 40em) &#123;
            :host ::ng-deep .priority-2 &#123;
                display: table-cell;
            &#125;
        &#125;

        @media screen and (min-width: 64em) &#123;
            :host ::ng-deep .priority-3 &#123;
                display: table-cell;
            &#125;
        &#125;
    `]
&#125;)
export class TreeTableResponsiveDemo &#123;

    files: TreeNode[];

    cols: any[];

    constructor(private nodeService: NodeService) &#123; &#125;

    ngOnInit() &#123;
        this.nodeService.getFilesystem().then(files => this.files = files);

        this.cols = [
            &#123; field: 'name', header: 'Name' &#125;,
            &#123; field: 'size', header: 'Size' &#125;,
            &#123; field: 'type', header: 'Type' &#125;
        ];
    &#125;
&#125;
</app-code>   
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-treetableresponsive-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>